<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<title></title>
	<!-- 引入Vue -->
	<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	<!-- <script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script> -->
	<!-- 引入element-ui样式/组件库 -->
	<link rel="stylesheet" type="text/css" href="./css/element-ui.css">
	<script src="./js/element-ui.js" type="text/javascript" charset="utf-8"></script>
	<!-- 引入umy-ui样式/组件库 -->
	<link rel="stylesheet" type="text/css" href="./css/umy-ui.css">
	<script src="./js/umy-ui.js" type="text/javascript" charset="utf-8"></script>
	<!-- 引入自定义CSS -->
	<link rel="stylesheet" type="text/css" href="./css/my.css" />
</head>

<body>
	<div id="app">
		<el-row :gutter="20">
			<el-col :span="20">
				<el-input v-model="target" placeholder="请输入链接或ID">
					<el-select v-model="type" slot="prepend" placeholder="类型">
						<el-option v-for="type in types" :key="type.value" :value="type.value" :label="type.lable">
						</el-option>
					</el-select>
					<el-button icon="el-icon-folder-add" slot="append" @click="openFile"></el-button>
				</el-input>
			</el-col>
			<el-col :span="4" class="center">
				<el-button type="primary" @click="start" :loading="loading">解析</el-button>
			</el-col>
		</el-row>
		<el-row :gutter="20">
			<el-col :span="24">

				<u-table ref="plTable" :height="385" use-virtual show-body-overflow="tooltip"
					show-header-overflow="title" :data-changes-scroll-top="false" :row-height="40" border
					v-loading="loading">
					<!-- 表格事件
					cell-click 当某个单元格被点击时会触发该事件 row, column, cell, event
					cell-dblclick 当某个单元格被双击击时会触发该事件 row, column, cell, event
					row-contextmenu 当某一行被鼠标右键点击时会触发该事件 row, column, event -->

					<u-table-column type="index" label="序号" width="60" fixed align='center'> </u-table-column>
					<u-table-column v-for="item in columns" :key="item.id" :resizable="true" :prop="item.prop"
						:label="item.label" :width="item.width">
						<!-- :show-overflow-tooltip="true"  -->
					</u-table-column>
					<u-table-column :resizable="true" label="下载进度" :width="80" align='center'>
						<template slot-scope="scope">
							<el-progress :show-text='false' :percentage="scope.row.status*100"
								v-show='scope.row.status<1'></el-progress>
							<i v-show='scope.row.status>=1' class="el-icon-circle-check icon-circle-check"></i>
							<!-- :text-inside="true"  :status="scope.row.status>=1?'success':null"-->

							<!-- <el-progress type="circle" :percentage="25"></el-progress>
							<el-progress type="circle" :percentage="100" status="success"></el-progress>
							<el-progress type="circle" :percentage="70" status="warning"></el-progress>
							<el-progress type="circle" :percentage="50" status="exception"></el-progress> -->
						</template>
					</u-table-column>

				</u-table>
			</el-col>
		</el-row>
	</div>
</body>
<!-- 引入自定义JS，Vue只能在页面底部创建 -->
<script src="js/my.js" type="text/javascript" charset="utf-8"></script>

</html>